<template>
    <div class="loading"></div>
</template>

<script setup lang="ts">
import {computed} from 'vue'

const props = defineProps<{
  size?: string,
  borderColor?: string
}>()
let size = computed(() => {
  if (props.size === 'mini') {
    return '24px'
  } else if (props.size === 'small') {
    return '36px'
  } else if (props.size === 'medium') {
    return '48px'
  } else {
    return '24px'
  }
})
let borderColor = computed(() => {
    return props.borderColor?props.borderColor:'#ccc'
})
</script>

<style scoped lang="scss">
.loading {
  width: v-bind('size');
  height: v-bind('size');
  border-radius: 50%;
  display: inline-block;
  border: 2px solid v-bind('borderColor');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip: rect(0px, calc(v-bind('size') * .625), calc(v-bind('size') / 1.5), 0px);
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

</style>